﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <p class="text-info">
      Welcome to the Angular Store<br />
      Please select the products you want ….<br /></p>
    <p>
      Search: <input ng-model="search"></p>

    <table class="table table-bordered">

      <tr class="well">
        <td class="tdRight" colspan="4" >
          <a href="default.htm#/cart" title="go to shopping cart"
             ng-disabled="cart.getTotalCount() < 1">
            <i class="icon-shopping-cart" />
            <b>{{cart.getTotalCount()}}</b> items,
            <b>{{cart.getTotalPrice() | currency}}</b>
          </a>
        </td>
      </tr>

      <tr ng-repeat="product in store.products | orderBy:'name' | filter:search" >
        <td class="tdCenter">
          <img ng-src="img/products/{{product.sku}}.jpg" alt="{{product.name}}" />
        </td>
        <td>
          <a href="#/products/{{product.sku}}"><b>{{product.name}}</b></a>
          <br />{{product.description}}
        </td>
        <td class="tdRight">
          {{product.price | currency}}
        </td>
        <td class="tdCenter">
          <a href="" 
           ng-click="cart.addItem(product.sku, product.name, product.price, 1)">
             add to cart
          </a>
        </td>
      </tr>

      <tr class="well">
        <td class="tdRight" colspan="4">
          <a href="default.htm#/cart" title="go to shopping cart"
             ng-disabled="cart.getTotalCount() < 1">
             <i class="icon-shopping-cart" />
             <b>{{cart.getTotalCount()}}</b> items,
             <b>{{cart.getTotalPrice() | currency}}</b>
          </a>
        </td>
      </tr>
    </table>
</body>
</html>
